<template>
	<ul>
		<li v-for="item in filmList">
			<div class="imgbox">
				<img :src="item.poster.thumbnail" alt=""/>
			</div>
			<div class='info'>
				<p class="fm">
					<span class="filmname">{{item.name}}</span>
					<span class="scroe"><span class="gt">&gt;</span></span>
				</p>
				<p class="desc">{{item.intro}}</p>
				<p class="film-counts">
					<span>{{item.premiereAt | formateDate}}</span>
					<span class="buy">星期五</span>
				</p>
			</div>
		</li>
	</ul>	
</template>
<script>
    import $ from 'jquery';
	export default{
		data:function() {
			return {
				filmList:[]
			}
		},
		filters:{
			'formateDate':function (t) {
				var time = new Date(t);
				var m = time.getMonth()+1;
				var d = time.getDate();
				return m + '月' + d + '日上映';
			}
		},
		mounted:function() {
			var that = this;
			var p = 1;
			var t = new Date().getTime();
			var willUrl = 'http://localhost:3000/will?time='+t+'&page='+p+'&count=7';
			$.get(willUrl,function(res) {
				that.filmList = res.data.films;
			});
		}
	}
</script>
<style scoped>
	.tab .router-link-active{
		color: #fe6e00;
		border-bottom: solid;
	}
	.film-counts span{
		color:#ffb375;
	}
</style>